<template>
	<view>
		<view class="header">
			<view class="navbar">
				<view class="navbar-fixed">
					<!-- 状态栏小程序撑起高度 -->
					<view :style="{height:statusBarHeight+'px'}"></view>
					<view class="navbar-content" :style="{height:navBarHeight+'px',width:windowWidth+'px'}">
						<!-- <image src="../../static/image/back.png" @click="back()"></image> -->
						<view class="navbar-search">优品</view>
					</view>
				</view>
				<!-- 需要添加占位符高度  状态栏高度+导航栏高度（否则下面tab会塌陷）indexOf-->
				<view :style="{height: statusBarHeight+navBarHeight+'px'}"></view>
			</view>
			<view class="searchbox" @click="tosearch()">
				<view class="search">
					<view class="scan">
						<image src="../../static/ss1.png"></image>
					</view>
					<view class="inputbox">
						<input placeholder="搜索" />
					</view>
					<view class="searchbut">搜索</view>
				</view>
			</view>
		</view>
		<scroll-view class="classify" scroll-x="true"  @scroll="scroll" scroll-left="120">
				<view>
					<view style="display: flex;white-space: nowrap;">
						<view class="catebox" v-for="(item,index) in cateList.slice(0,Math.floor(cateList.length/2))" :key="index" @click="togoodslist(item)">
							<image :src="item.url"></image>
							<view>{{item.name}}</view>
						</view>
					</view>
					<view style="display: flex;white-space: nowrap;">
						<view class="catebox" v-for="(item,index) in cateList.slice(Math.floor(cateList.length/2),cateList.length-1)" :key="index" @click="togoodslist(item)">
							<image :src="item.url"></image>
							<view>{{item.name}}</view>
						</view>
					</view>
				</view>
		</scroll-view>
		<!-- <view class="classify">
			<view class="catebox" v-for="(item,index) in cateList.slice(0,8)" :key="index" @click="togoodslist(item)">
				<image :src="item.url"></image>
				<view>{{item.name}}</view>
			</view>
		</view> -->
		<view style="text-align: center;margin: 30rpx auto 24rpx auto;">
			<image class="jp" src="../../static/jp.png"></image>
		</view>
		<goods :logo="true" :list="list" @togoodsinfo="togoodsinfo"></goods>
		<kong v-if="list.length==0"></kong>
		<u-back-top :scroll-top="scrollTop" :iconStyle="{
					color: '#fff',
				}" :customStyle="{
			backgroundColor: '#F94D29',
			color: '#fff',
		}" top="600"></u-back-top>
	</view>
</template>

<script>
	import goods from '../../components/goods.vue'
	import kong from '../../components/kong.vue'
	export default {
		components: {
			goods,
			kong
		},
		data() {
			return {
				statusBarHeight: 20,
				/* 状态栏高度 */
				navBarHeight: 45,
				/* 导航栏高度 */
				windowWidth: 375,
				/* 窗口宽度 */
				/* 设定状态栏默认高度 */
				page_index: 1,
				is_data: true,
				list: [],
				cateList: [], //分类列表
				numbg: '',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
			}
		},
		onReachBottom() {
			this.is_data && this.getlist()
		},
		onShow() {
			this.getnav()
			this.getlist()

		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			getnav() {
				// 获取手机系统信息
				const info = uni.getSystemInfoSync()
				// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
				this.statusBarHeight = info.statusBarHeight
				this.windowWidth = info.windowWidth
				// 除了h5 app mp-alipay的情况下执行
				// #ifndef H5 || APP-PLUS || MP-ALIPAY
				// 获取胶囊的位置
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				console.log(menuButtonInfo);
				// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
				this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
					.statusBarHeight)
				this.windowWidth = menuButtonInfo.left
				// #endif
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			togoodslist(item) {
				uni.navigateTo({
					url: '/pages/goodslist/goodslist?info=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			getlist() {
				this.$http({
					url: 'api/Wechat/subGoods',
					data: {
						page_index: this.page_index,
						page_size: 20
					}
				}).then(res => {
					this.cateList = res.data.cateList
					const num = (this.cateList.length) % 8
					this.numbg = parseInt((this.cateList.length / 8)) + (this.numbg > 0 ? 1 : 0)
					console.log(this.numbg, num, '余数', parseInt((this.cateList.length / 8)))
					if (res.data.goodsList.length) {
						this.list.push(...res.data.goodsList)
						this.page_index++
						return
					}
					this.is_data = false
				})
			},
			//搜索
			tosearch() {
				uni.navigateTo({
					url: '/personalData/search/search'
				})
			},
			togoodsinfo(result) {
				uni.navigateTo({
					url: '/pageshop/goodsinfo/goodsinfo?id=' + result.id
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.header {
		height: 442rpx;
		background: url("../../static/bg4.png") no-repeat;
		width: 100%;
		background-size: 100% 442rpx;
	}

	.navbar {
		.navbar-fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 399;
			width: 100%;
			// height: 102rpx;
			// padding-bottom: 20rpx;
			background: transparent;


			.navbar-content {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0rpx 30rpx;
				// height: 142rpx;
				box-sizing: border-box;

				image {
					width: 19rpx;
					height: 35rpx;
					margin-right: 20rpx;
				}

				.navbar-search {
					display: flex;
					align-items: center;
					// padding: 0 10px;
					width: 100%;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;

				}

			}
		}
	}

	.searchbox {
		width: 100%;
		height: 134rpx;
		display: flex;
		align-items: center;
		margin-top: 40rpx;
		justify-content: space-between;

		.search {
			width: 690rpx;
			height: 40rpx;
			padding: 15rpx 0;
			background: #FFFFFF;
			border-radius: 36rpx;
			// border: 2rpx solid #F94D29;
			display: flex;
			align-items: center;
			margin: 0 auto;
			justify-content: space-between;

			.scan {
				width: 76rpx;
				text-align: center;
				border-right: solid 2rpx #F2F2F2;

				image {
					width: 32rpx;
					height: 26rpx;
				}
			}

			.inputbox {
				width: 448rpx;
				height: 40rpx;
				padding: 0 24rpx;

				>input {
					width: 100%;
				}
			}

			.searchbut {
				width: 112rpx;
				height: 62rpx;
				background: linear-gradient(180deg, #F94D29 0%, #F99529 100%);
				border-radius: 36rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #F7F7F7;
				line-height: 62rpx;
				text-align: center;
				margin-right: 5rpx;
			}
		}
	}

	.classify {
		width: 690rpx;
		// white-space: nowrap;
		// height: 416rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-wrap: wrap;
		margin: -102rpx auto 0 auto;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #222222;

		.catebox {
			min-width: 25vw;
			text-align: center;
			background: #FFFFFF;
			// height: 300rpx;
			// line-height: 300rpx;
			// text-align: center;
			// font-size: 36rpx;

			// height: 208rpx;
			image {
				width: 112rpx;
				height: 104rpx;
				background: #FFFFFF;
				margin: 20rpx 0;
			}

			>view {
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	.jp {
		width: 228rpx;
		height: 46rpx;
	}
</style>